<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Forgot password</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/forgot_password.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">
</head>

<body>
<div class="mdl-layout mdl-js-layout">
    <div class="forgot-password-container">
        <div th:if="${error == null && success == null}" class="forgot-password-form">
            <div class="forgot-password-form-title">
                <label>Forgot your password ?</label>
                <span>An email will be sent with password reset instructions</span>
            </div>
            <form role="form" th:action="@{forgotPassword}" method="post" style="display: flex; flex-direction: column; margin-top: 30px;">
                <div class="forgot-password-form-content">
                    <div class="input-textfield">
                        <label for="email">Email</label>
                        <i class="mdl-textfield__icon material-icons" style="position: absolute; margin-top: 27px; margin-left: 5px;">mail</i>
                        <input type="email" id="email" name="email" required style="padding-left: 30px;"/>
                    </div>
                </div>
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="hidden" th:name="client_id" th:value="${param.client_id}"/>
                <div style="display: flex; flex-direction: row;">
                    <a th:href="@{login(client_id=${param.client_id})}"><< Back to login</a>
                    <span style="display: flex; flex: 1;"></span>
                    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Reset password</button>
                </div>
            </form>
        </div>

        <div th:if="${success}" class="forgot-password-form">
            <div class="forgot-password-form-title">
                <label>Forgot password confirmation</label>
                <p>An email has been sent asking to reset your password.</p>
            </div>
        </div>

        <div th:if="${error}" class="forgot-password-form">
            <div class="forgot-password-form-title">
                <label>Forgot password error</label>
                <p>Please go back to your client application and try again, or contact the owner and ask for support</p>
            </div>
            <div class="forgot-password-error-info">
                Error description : <span th:text="${error}" class="error"></span>
            </div>
        </div>
    </div>
</div>

<!--[if lt IE 10]>
<script th:src="@{assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{assets/material/material.min.js}"></script>
<script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
<script>
    $(".mdl-textfield__input").focus(function (){
        if( !this.value ){
            $(this).prop('required', true);
            $(this).parent().addClass('is-invalid');
        }
    });
    $(".mdl-button[type='submit']").click(function (event){
        $(this).siblings(".mdl-textfield").addClass('is-invalid');
        $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
    });
</script>
</body>
</html>
